<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分页和表格</title>
		<link href="favicon.ico" rel="icon" type="image/x-icon" />
		<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../css/default.css">
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<!-- 导入ztree类库 -->
		<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css" />
		<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
		<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<script type="text/javascript">
			//分页和表格
		$(function(){
			$('#dd').datagrid({    
			    url:'demo.json',    
			    columns:[[    
			        {field:'id',title:'编号',width:100},    
			        {field:'name',title:'商品名称',width:100},    
			        {field:'company',title:'商品价格',width:100}    
			    ]],
			    pagination:true,
				toolbar: [{
					iconCls: 'icon-edit',
					handler: function(){
						alert('编辑按钮')
						}
				},'-',{
					iconCls: 'icon-save',
					handler: function(){
						alert('保存')
						}
				}]
			}); 
		});
		</script>
	</head>
	
	
	<body>   
		<table id="dd"></table>
	</body> 
		
</html>
